<template>
  <div class="header-wrapper d-flex jc-between">
    <div class="header-left d-flex ai-center">
      <img class="header-logo" src="./images/header-logo.png" alt="">
      <span class="header-text">厚街镇综合指挥大屏</span>
    </div>
    <div class="header-center d-flex ai-center jc-between">
      <div class="header-tab tab1">平时指挥</div>
      <div class="header-tab tab2 active">平时指挥</div>
      <div class="header-tab tab3">平时指挥</div>
    </div>
    <div class="header-right d-flex ai-center jc-end">
      <span class="header-text" style="margin-right: 6.7273rem;">
        {{ dateYear }}
      </span>
    </div>
  </div>
</template>

<script>
import { formatTime } from '@/utils/index.js'
export default {
  data() {
    return {
      dateDay: null,
      dateYear: null,
      dateWeek: null,
      weekday: ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
    }
  },
  mounted() {
    this.timeFn()
  },
  methods: {
    timeFn() {
      setInterval(() => {
        this.dateDay = formatTime(new Date(), 'HH: mm: ss')
        this.dateYear = formatTime(new Date(), 'yyyy年MM月dd日')
        this.dateWeek = this.weekday[new Date().getDay()]
      }, 1000)
    }
  }
}
</script>
<style lang="scss" scoped>
.header-wrapper{
  height: 5.36rem;
  width: 100%;
  background-image: url('~@/views/common/images/header-bg.png');
  background-size: cover;
  background-position: center center;
  .header-left, .header-right{
    height: 100%;
    width: 33.33%;
  }
  .header-logo{
    width: 6.5227rem;
    margin-left: 2.6818rem;
    margin-right: 2rem;
  }
  .header-text{
    color: #FEFEFE;
    font-size: 2.2955rem;
    font-weight: bold;
  }
  .header-center{
    color: #FEFEFE;
    font-size: 1.36rem;
    .header-tab{
      width: 7.5227rem;
      height: 3.7045rem;
      border: 0.1364rem solid #266BBB;
      line-height: 3.4318rem;
      text-align: center;
      border-radius: 0.1818rem;
      font-weight: bold;
      &+.header-tab{
        margin-left: 2.5rem;
      }
      &.active{
        background: #1E86DC;
        border-color: #1E86DC;
      }
    }
  }
}
</style>
